<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="15">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="openSearch = true"
          >搜索</el-button
        >

        <span style="padding-left: 10px" v-if="queryZtbz == 1">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="() => handleAdd(tableData)"
            v-hasPermi="['purchase:bill:add']"
          >
            新增
          </el-button>

          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="!canSubmit"
            @click="handleUpdate"
            v-hasPermi="['purchase:bill:edit']"
          >
            修改
          </el-button>

          <el-button
            type="primary"
            plain
            icon="el-icon-check"
            size="mini"
            @click="handleSubmit"
            :disabled="!canSubmit"
            v-hasPermi="['purchase:bill:submit']"
          >
            提交
          </el-button>
          <el-button
            type="danger"
            plain
            size="mini"
            :disabled="!canCheck"
            @click="handleBack"
            v-hasPermi="['purchase:bill:back']"
            >撤回</el-button
          >
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            :disabled="!canSubmit"
            v-hasPermi="['purchase:bill:remove']"
          >
            删除
          </el-button>
        </span>
        <span style="padding-left: 10px" v-if="queryZtbz == 2">
          <el-button
            type="primary"
            plain
            size="mini"
            :disabled="!canCheck"
            @click="handleCheck"
            v-hasPermi="['purchase:bill:check']"
            >审核</el-button
          >
          <el-button
            :disabled="!canIntoCheck"
            type="danger"
            plain
            icon="el-icon-circle-check"
            size="mini"
            @click="handleAccounting"
            v-hasPermi="['purchase:bill:Accounting']"
          >
            入账
          </el-button>
          <el-button
            type="danger"
            plain
            size="mini"
            :disabled="canRollback"
            @click="handleBack2"
            v-hasPermi="['purchase:bill:back2']"
          >
            撤回
          </el-button>
        </span>
        <span style="padding-left: 10px">
          <el-button
            style="padding-left: 10px"
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            title="导出物料统计"
            @click="exportChild(1)"
          >
            导出物料统计
          </el-button>
          <el-button
            style="padding-left: 10px"
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="exportChild(2)"
          >
            导出物料明细
          </el-button>
          <el-button
            style="padding-left: 10px"
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="exportXls()"
            >导出</el-button
          >
        </span>
        <span style="padding-left: 10px">
          <HdTagGroup :show="['tijiao', 'shenhe']" />
          <Tag type="dot" color="#bb0331">入账</Tag>
        </span>
      </el-col>
    </el-row>
    <el-table
      highlight-current-row
      border
      stripe
      ref="multipleTable"
      v-loading="tableData.loading"
      :data="tableData.rows"
      @row-click="getListChild"
      @selection-change="handleSelectionChange"
      id="tabMain"
      @scrollBottom="load"
      :height="tableData.height"
      :cell-style="iCellStyle"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column fixed type="selection" width="55" align="center" />
      <el-table-column
        label="单据编号"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="billDjbh"
      />
      <el-table-column
        label="厂商名称"
        min-width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="billCsdm"
      >
        <template #default="scope">
          <dict-tag :options="allCsOptions" :value="scope.row.billCsdm" />
        </template>
      </el-table-column>
      <el-table-column
        label="公司名称"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="billGsmc"
      />
      <el-table-column
        label="入库类型"
        min-width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="billType"
      >
        <template #default="scope">
          <dict-tag :options="psTypeOptions" :value="scope.row.billType" />
        </template>
      </el-table-column>
      <el-table-column
        label="含税总金额"
        width="100"
        align="center"
        prop="billTotalJe"
      ></el-table-column>
      <el-table-column
        label="质量扣款"
        width="100"
        align="center"
        prop="billZlkk"
      ></el-table-column>
      <el-table-column
        label="发票税金"
        width="100"
        align="center"
        prop="billTaxMoney"
      ></el-table-column>
      <el-table-column
        label="发票未税金额"
        width="100"
        align="center"
        prop="billUntaxed"
      ></el-table-column>
      <el-table-column label="对账金额" width="100" align="center">
        <template #default="scope">
          {{ (scope.row.billTotalJe - scope.row.billZlkk).toFixed(6) }}
        </template>
      </el-table-column>
      <el-table-column
        label="发票号"
        width="100"
        align="center"
        prop="billInvoice"
      ></el-table-column>
      <el-table-column
        label="备注"
        :show-overflow-tooltip="true"
        align="center"
        prop="billDesc"
      ></el-table-column>
      <el-table-column
        label="对账开始日期"
        width="110"
        align="center"
        prop="billKsrq"
      >
        <template #default="scope">
          {{ $moment(scope.row.billKsrq).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column
        label="对账结束日期"
        width="110"
        align="center"
        prop="billJsrq"
      >
        <template #default="scope">
          {{ $moment(scope.row.billJsrq).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column
        label="建立人员"
        width="100"
        align="center"
        prop="billJlry"
      />
      <el-table-column
        label="建立日期"
        width="120"
        align="center"
        prop="billJlrq"
      />
      <el-table-column
        label="审核人员"
        width="100"
        align="center"
        prop="billShry"
      />
      <el-table-column
        label="审核日期"
        width="120"
        align="center"
        prop="billShrq"
      />
      <el-table-column
        label="入账人员"
        width="100"
        align="center"
        prop="billRzry"
      />
      <el-table-column
        label="入账日期"
        width="120"
        align="center"
        prop="billRzrq"
      />
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="150"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            v-if="queryZtbz == '1'"
            size="mini"
            type="text"
            icon="el-icon-plus"
            :disabled="scope.row.billTjflag == '1'"
            @click="handleAddChild(scope.row)"
            v-hasPermi="['purchase:bill:add']"
          >
            添加
          </el-button>
          <el-button
            :disabled="!(scope.row.billZtbz != 1)"
            size="mini"
            type="danger"
            style="width: 70px; border-radius: 10%"
            @click="printHandle(scope.row)"
          >
            单据打印
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <portal-target :name="portalId"></portal-target>
    <portal :to="tableDataChild.open ? 'dialog-' + portalId : portalId">
      <div style="position: relative">
        <el-input
          placeholder="请输入关键字查询"
          prefix-icon="el-icon-search"
          v-model="serachFuzzy"
          style="position: absolute; right: 0px; width: 333px; z-index: 9"
        ></el-input>
        <el-tabs v-model="activeTab" v-loading="tableDataChild1.loading">
          <el-tab-pane label="入库统计" name="second">
            <u-table
              highlight-current-row
              border
              stripe
              use-virtual
              show-summary
              :summary-method="summaryMethod"
              showBodyOverflow="title"
              showHeaderOverflow="title"
              row-id="parentId"
              row-key="parentId"
              :row-height="24"
              :data="filterFuzzy"
              :height="tableDataChild.height"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <u-table-column
                label="物料代码"
                align="center"
                prop="rwdWldm"
                width="135px"
                :tree-node="true"
                fixed="left"
              />
              <u-table-column
                label="客户编码"
                align="center"
                width="135px"
                prop="itmCustwldm"
              />
              <u-table-column
                label="收货单号"
                align="center"
                width="135px"
                prop="rwmShdh"
              />
              <u-table-column
                label="品名规格"
                prop="itmPmgg"
                min-width="200px"
              />
              <u-table-column
                label="单位"
                :show-overflow-tooltip="true"
                width="60px"
                align="center"
                prop="itmDw"
              >
                <template #default="scope">
                  <dict-tag
                    :options="unitFlagOptions"
                    :value="scope.row.itmDw"
                  />
                </template>
              </u-table-column>
              <u-table-column
                label="申请数量"
                align="center"
                prop="rwdSqsl"
                width="100px"
              />
              <u-table-column
                label="入库数量"
                align="center"
                prop="rwdRksl"
                width="100px"
              />
              <u-table-column
                label="本次对账数量"
                align="center"
                prop="completeNumber"
                width="100px"
              />
              <u-table-column
                label="厂商放弃数量"
                align="center"
                prop="deductNumber"
                width="100px"
              />
              <u-table-column
                label="单据编号"
                align="center"
                prop="rwmDjbh"
                width="130px"
              />
              <u-table-column
                label="含税单价"
                width="130px"
                align="left"
                prop="rwdMoney"
              >
                <template #default="scope" v-if="scope.row.hasChildren">
                  <!-- <el-popover trigger="manual" placement="right" :value="scope.row.rwdMoney !== scope.row.tmpJe">
                <p>保存修改？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="handleCancelChild(scope.row)">取消</el-button>
                  <el-button type="primary" size="mini" @click="handleSaveChild(scope.row)">确定</el-button>
                </div>
                <el-input-number v-model="scope.row.rwdMoney" slot="reference" size="mini" :controls="false" />
              </el-popover> -->
                  <el-input-number
                    v-model="scope.row.rwdMoney"
                    :disabled="queryZtbz != 1 || !canSubmit"
                    size="mini"
                    :controls="false"
                    @change="handleSaveChild(scope.row, scope.$index)"
                  />
                </template>
              </u-table-column>
              <u-table-column
                label="存放位置"
                width="100px"
                align="center"
                prop="rwmCkdm"
              ></u-table-column>
              <u-table-column
                v-if="queryZtbz == 1"
                fixed="right"
                label="操作"
                align="center"
                width="60px"
                class-name="small-padding fixed-width"
              >
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="text"
                    :disabled="!canSubmit || scope.row.rwdRksl < 0"
                    @click="handleDeleteChild(scope.row)"
                    v-hasPermi="['purchase:bill:remove']"
                  >
                    删除
                  </el-button>
                </template>
              </u-table-column>
            </u-table>
          </el-tab-pane>
          <el-tab-pane label="入库明细" name="first">
            <u-table
              highlight-current-row
              border
              stripe
              use-virtual
              show-summary
              :summary-method="summaryMethod2"
              row-id="parentId"
              row-key="parentId"
              showBodyOverflow="title"
              showHeaderOverflow="title"
              :row-height="24"
              :data="tableMx"
              :height="tableDataChild.height"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <!-- <u-table-column label="#" width="40px" type="index" align="center" /> -->
              <u-table-column
                label="单据编号"
                align="center"
                prop="rwmDjbh"
                width="180px"
                :tree-node="true"
                sortable
              />
              <u-table-column
                label="物料代码"
                align="center"
                prop="rwdWldm"
                width="135px"
              />
              <u-table-column
                label="客户编码"
                align="center"
                width="135px"
                prop="itmCustwldm"
              />
              <u-table-column
                label="品名规格"
                prop="itmPmgg"
                min-width="200px"
              />
              <u-table-column
                label="单位"
                :show-overflow-tooltip="true"
                width="60px"
                align="center"
                prop="itmDw"
              >
                <template #default="scope">
                  <dict-tag
                    :options="unitFlagOptions"
                    :value="scope.row.itmDw"
                  />
                </template>
              </u-table-column>
              <u-table-column
                label="申请数量"
                align="center"
                prop="rwdSqsl"
                width="100px"
              />
              <u-table-column
                label="入库数量"
                align="center"
                prop="rwdRksl"
                width="100px"
              />
              <u-table-column
                label="本次对账数量"
                align="center"
                prop="completeNumber"
                width="100px"
              />
              <u-table-column
                label="厂商放弃数量"
                align="center"
                prop="deductNumber"
                width="100px"
              />
              <u-table-column
                label="存放位置"
                width="100px"
                align="center"
                prop="rwmCkdm"
              ></u-table-column>
              <u-table-column
                v-if="queryZtbz == 1"
                fixed="right"
                label="操作"
                align="center"
                width="60px"
                class-name="small-padding fixed-width"
              >
                <template #default="scope">
                  <el-button
                    v-if="scope.row.rwdWldm"
                    size="mini"
                    type="text"
                    :disabled="!canSubmit || scope.row.rwdRksl < 0"
                    @click="handleDeleteChild(scope.row)"
                    v-hasPermi="['purchase:bill:remove']"
                  >
                    删除
                  </el-button>
                </template>
              </u-table-column>
            </u-table>
          </el-tab-pane>
          <el-tab-pane label="发票文件" name="three">
            <FileUpload
              :readOnly="curRow.billZtbz == '3'"
              v-model="tableData.form.docFile"
              :limit="10"
              :isShowTip="false"
              :fileType="['png', 'jpg', 'jpeg', 'pdf']"
              @input="handleTest"
            ></FileUpload>
          </el-tab-pane>
        </el-tabs>
      </div>
    </portal>
    <!-- 查询对话框   -->
    <el-dialog
      title="查询"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="650px"
      append-to-body
    >
      <el-form
        :model="tableData.queryParams"
        ref="queryForm"
        label-width="75px"
      >
        <el-col :span="12">
          <el-form-item label="单据编号" prop="billDjbh">
            <el-input v-model="tableData.queryParams.billDjbh" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票号" prop="billInvoice">
            <el-input v-model="tableData.queryParams.billInvoice" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库单号" prop="rwdDjbh">
            <el-input v-model="tableData.queryParams.rwdDjbh" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="综合查询" prop="itmPmgg">
            <el-input v-model="tableData.queryParams.itmPmgg" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="厂商代码" prop="billCsdm">
            <el-select
              v-model="tableData.queryParams.billCsdm"
              clearable
              filterable=""
              size="small"
              style="width: 450px"
            >
              <el-option
                v-for="dict in allCsOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="建立时间" prop="billJlrq">
            <el-date-picker
              v-model="daterange2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="get_info"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="入帐日期">
            <hd-date-picker
              keyName="TimeRz"
              v-model="tableData.queryParams.params"
            ></hd-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="入库日期">
            <hd-date-picker
              keyName="TimeRw"
              v-model="tableData.queryParams.params"
            ></hd-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: center">
          <el-form-item label="单据状态" prop="billZtbz">
            <el-radio-group v-model="tableData.queryParams.billZtbz">
              <el-radio
                v-for="dict in ZtbzOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
    <!-- 添加或修改物料对话框 -->
    <el-dialog
      :title="tableData.title"
      v-model="tableData.open"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="tableData.form"
        :rules="tableData.rules"
        label-width="80px"
      >
        <el-form-item label="单据编号" prop="billDjbh">
          <el-input
            v-model="tableData.form.billDjbh"
            placeholder="流水单号生成"
            disabled
          />
        </el-form-item>
        <el-form-item label="对账日期">
          <el-date-picker
            :disabled="tableData.title === '修改'"
            v-model="dateRange"
            type="daterange"
            :clearable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="厂商代码" prop="billCsdm">
          <el-select
            v-model="tableData.form.billCsdm"
            :clearable="false"
            filterable
            :disabled="tableData.title === '修改'"
            size="small"
            @change="getBillGsmc"
            style="width: 100%"
          >
            <el-option
              v-for="dict in csOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库类型" prop="billType">
          <el-select
            style="width: 100%"
            v-model="tableData.form.billType"
            placeholder="请选择入库类型"
            :disabled="tableData.title === '修改'"
          >
            <el-option
              v-for="dict in psTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="公司名称" prop="billGsmc">
          <el-input
            :disabled="tableData.form.billCsdm !== 'HD000'"
            v-model="tableData.form.billGsmc"
            placeholder="请输入采购公司名称"
          />
        </el-form-item>
        <el-form-item label="质量扣款" prop="billZlkk">
          <el-input-number
            v-model="tableData.form.billZlkk"
            :disabled="tableData.title !== '修改'"
          />
        </el-form-item>
        <el-form-item label="税金" prop="billTaxMoney">
          <el-input-number
            v-model="tableData.form.billTaxMoney"
            :disabled="tableData.title !== '修改'"
          />
        </el-form-item>
        <el-form-item label="未税金额" prop="billUntaxed">
          <el-input-number
            v-model="tableData.form.billUntaxed"
            :disabled="tableData.title !== '修改'"
          />
        </el-form-item>
        <el-form-item label="发票号" prop="billInvoice">
          <el-input v-model="tableData.form.billInvoice" />
        </el-form-item>
        <el-form-item label="单据备注" prop="billDesc">
          <el-input v-model="tableData.form.billDesc" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDiag(tableData)">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改子表对话框 -->
    <el-dialog
      :title="tableDataChild.title"
      v-model="tableDataChild.open"
      :close-on-click-modal="false"
      fullscreen
      append-to-body
    >
      <!-- 子项搜索条件框-->
      <el-form :model="tableDataChild.queryParams" :inline="true">
        <el-row>
          <el-col :span="5">
            <el-form-item label="综合查询" prop="itmPmgg">
              <el-input
                v-model="tableDataChild.queryParams.itmPmgg"
                placeholder="请输入物料代码/品名规格"
                clearable
                size="small"
                @keyup.enter.native="serachChildrened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="单据编号" prop="searchDjbh">
              <el-input
                v-model="tableDataChild.queryParams.searchDjbh"
                placeholder="请输入单据编号"
                clearable
                size="small"
                @keyup.enter.native="serachChildrened"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item style="display: flex; justify-content: flex-end">
              <el-button type="primary" @click="serachChildrened"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--子项数据框-->
      <!--      @row-click="clickdel"-->

      <u-table
        v-loading="tableDataChild.loading"
        highlight-current-row
        border
        stripe
        :height="tableData.height - 80"
        ref="somCheckTable"
        use-virtual
        showBodyOverflow="title"
        showHeaderOverflow="title"
        :row-height="24"
        row-id="parentId"
        row-key="parentId"
        big-data-checkbox
        @select-all="handleSelectAll"
        @select="handleSelect"
        @selection-change="handleSelectionChangeChild"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <u-table-column
          label="#"
          min-width="5%"
          type="selection"
          align="center"
          reserve-selection
          :selectable="(row) => row.selectable !== false"
        />
        <u-table-column
          label="物料代码"
          min-width="20%"
          :show-overflow-tooltip="true"
          align="center"
          prop="billdWldm"
          :tree-node="true"
          sortable
        />
        <u-table-column
          label="客户编码"
          min-width="12%"
          :show-overflow-tooltip="true"
          align="center"
          prop="itmCustwldm"
          sortable
        />
        <u-table-column
          label="来源单号"
          min-width="12%"
          :show-overflow-tooltip="true"
          align="center"
          prop="rwdDjbh"
          sortable
        />
        <u-table-column
          label="品名规格"
          min-width="30%"
          :show-overflow-tooltip="true"
          prop="itmPmgg"
          sortable
        />
        <u-table-column
          label="单位"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="itmDw"
        >
          <template #default="scope">
            <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
          </template>
        </u-table-column>
        <u-table-column
          label="含税单价"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="billdMoney"
        >
          <template #default="scope">
            <span>{{
              scope.row.billdMoney == 0 ? "" : scope.row.billdMoney
            }}</span>
          </template>
        </u-table-column>
        <u-table-column
          label="申请数量"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="billdSqsl"
        />
        <u-table-column
          label="存放位置"
          min-width="12%"
          align="center"
          prop="billdCwdm"
        >
          <template #default="scope">
            <dict-tag :options="allCwOptions" :value="scope.row.billdCwdm" />
          </template>
        </u-table-column>
        <u-table-column
          label="申请数量"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="billdSqsl"
        />
        <u-table-column
          label="入库数量"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="billdRksl"
        />
        <u-table-column
          label="可对账数量"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="usableNumber"
        />
        <u-table-column
          label="本次对账数量"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="completeNumber"
        >
          <template #default="scope" v-if="!scope.row.hasChildren">
            <el-input-number
              v-model="scope.row.completeNumber"
              :min="Math.min(0, scope.row.billdRksl)"
              :disabled="
                queryZtbz != 1 || !canSubmit || scope.row.billdRksl < 0
              "
              size="mini"
              :controls="false"
            />
          </template>
        </u-table-column>
        <u-table-column
          label="厂商放弃数量"
          min-width="10%"
          :show-overflow-tooltip="true"
          align="center"
          prop="deductNumber"
        >
          <template #default="scope" v-if="!scope.row.hasChildren">
            <el-input-number
              v-model="scope.row.deductNumber"
              :min="0"
              :disabled="queryZtbz != 1 || !canSubmit"
              size="mini"
              :controls="false"
            />
          </template>
        </u-table-column>
        <!-- <u-table-column label="入库日期" min-width="10%" :show-overflow-tooltip="true" align="center" prop="rwmRkrq" /> -->
      </u-table>

      <portal-target :name="'dialog-' + portalId"></portal-target>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDiag(tableDataChild)">关 闭</el-button>
        <el-button type="primary" @click="submitFormChild">添 加</el-button>
      </div>
    </el-dialog>
    <!--    需要打印的东西-->
    <hd-print-page ref="printPage">
      <async-component
        :url="
          $store.getters.isWuHan
            ? 'print-purchase-bill-a4'
            : 'print-purchase-bill'
        "
        :context="context"
      />
    </hd-print-page>
  </div>
</template>

<script>
import ProcessService from "@/api/purchase/purchaseBill";
import mixin from "@/mixins/common";
export default {
  name: "PurchaseBill",
  mixins: [
    mixin.allCsOptions,
    mixin.unitFlagOptions,
    mixin.jyjgDict,
    mixin.psTypeOptions,
    mixin.csOptions,
    mixin.allStorageOptions,
    mixin.storageOptions,
  ],
  data() {
    return {
      context: {},
      // 遮罩层
      serachFuzzy: "",
      exportLoading: false,
      openSearch: false,
      //入库类型
      psTypeOptions: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick: (picker) => {
              const end = this.$moment().endOf("week").toDate();
              const start = this.$moment().startOf("week").toDate();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick: (picker) => {
              const end = this.$moment().endOf("day").toDate();
              const start = this.$moment().startOf("month").toDate();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上周",
            onClick: (picker) => {
              const date = this.$moment().add(-1, "week");
              const end = date.endOf("week").toDate();
              const start = date.startOf("week").toDate();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上月",
            onClick: (picker) => {
              const date = this.$moment().add(-1, "month");
              const end = date.endOf("month").toDate();
              const start = date.startOf("month").toDate();
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      daterange2: [],
      ZtbzOptions: [
        {
          dictLabel: "未审核",
          dictValue: "1",
        },
        {
          dictLabel: "已审核",
          dictValue: "2",
        },
        {
          dictLabel: "已入账",
          dictValue: "3",
        },
        {
          dictLabel: "全部",
          dictValue: "",
        },
      ],
      tableMx: [],
      totalOption: [
        { label: "申请数量", unit: "" },
        { label: "入库数量", unit: "" },
      ],
      means: { rwdSqsl: 0, rwdRksl: 0, completeNumber: 0 },
      tableData: {
        height: (document.body.clientHeight - 200) / 2,
        rows: [],
        loading: false,
        total: 0,
        selection: [],
        title: "对账单",
        open: false,
        form: {
          billId: null,
          billDjbh: null,
          billCsdm: null,
          billZtbz: null,
          billTjflag: undefined,
          billType: null,
        },
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          billDjbh: null,
          billCsdm: null,
          billInvoice: null,
          billJlrq: null,
          billZtbz: "1",
          billTjflag: null,
          params: {},
        },
        rules: {
          billCsdm: [
            { required: true, message: "请选择厂商代码", trigger: "blur" },
          ],
          billInvoice: [{ required: true, message: "请填写发票号" }],
          billGsmc: [
            { required: true, message: "请输入采购公司名称", trigger: "blur" },
          ],
        },
      },
      tableDataChild: {
        height: (document.body.clientHeight - 250) / 2,
        rows: [],
        loading: false,
        total: 0,
        open: false,
        form: {},
        selection: [],
        rules: {
          processNo: [
            { required: true, message: "请输入序号", trigger: "blur" },
          ],
          processMouldCode: [
            { required: true, message: "请选择模具", trigger: "blur" },
          ],
        },
        queryParams: {
          pageNum: 1,
          pageSize: 9999,
          billCsdm: null,
          billDjbh: null,
          billType: null,
          searchDjbh: null,
          params: {
            beginDate: this.$moment().startOf("month").format(),
            endDate: this.$moment().endOf("month").format(),
          },
        },
      },
      tableDataChild1: {
        rows: [],
        loading: false,
        total: 0,
        title: "对账统计",
        open: false,
        form: {},
        rules: {},
      },
      // 建立日期时间范围
      dateRange: [
        this.$moment().startOf("month").toDate(),
        this.$moment().endOf("month").toDate(),
      ],
      activeTab: "second",
      addDate: true,
      curRow: {},
      portalId: "portal",
      pageData: [],
    };
  },
  created() {
    this.portalId += String(Math.round(Math.random() * 10000));
    this.getList();
  },
  watch: {
    dateRange(val, old) {
      if (val && val[1]) {
        this.tableDataChild.queryParams.params.beginDate = val[0];
        this.tableDataChild.queryParams.params.endDate = val[1];
      } else {
        this.tableDataChild.queryParams.params = {};
      }
    },
  },
  computed: {
    queryZtbz() {
      const ztbz = this.$route.query.ztbz || "1";
      this.tableData.queryParams.billTjflag = ztbz !== "1" ? "1" : null;
      return ztbz;
    },
    canSubmit() {
      return (
        this.single && (!this.curRow.billTjflag || this.curRow.billTjflag == 0)
      );
    },
    canIntoCheck() {
      return (
        this.tableData.selection.filter(
          (c) => c.billZtbz == "2" && c.billTjflag == "1"
        ).length > 0 && this.single
      );
    },
    canCheck() {
      return (
        this.tableData.selection.filter(
          (c) => c.billZtbz == "1" && c.billTjflag == "1"
        ).length > 0
      );
    },
    canRollback() {
      return (
        this.tableData.selection.filter((c) => c.billZtbz == "3").length > 0
      );
    },
    single() {
      return this.tableData.selection.length === 1;
    },
    filterFuzzy() {
      let searchData = this.tableDataChild1.rows;
      this.serachFuzzy = this.serachFuzzy.trim();
      if (this.serachFuzzy) {
        searchData = searchData.filter((o) => {
          if (o?.itmCustwldm) {
            if (o?.itmCustwldm.indexOf(this.serachFuzzy) > -1) return true;
          }
          if (o?.itmPmgg) {
            if (o.itmPmgg?.indexOf(this.serachFuzzy) > -1) return true;
          }
          if (o?.rwdWldm) {
            if (o.rwdWldm?.indexOf(this.serachFuzzy) > -1) return true;
          }
          return false;
        });
      }
      this.means = { rwdSqsl: 0, rwdRksl: 0, completeNumber: 0 };
      let groups = searchData
        .reduce((pre, cur) => {
          this.means.rwdRksl += cur.rwdRksl;
          this.means.rwdSqsl += cur.rwdSqsl;
          this.means.completeNumber += cur.completeNumber;
          return pre.concat(cur.children);
        }, [])
        .groupBy((it) => it.rwmDjbh);
      this.tableMx = Object.keys(groups)
        .map((cate) => {
          return groups[cate].reduce(
            (pre, cur) => {
              pre.rwmType = cur.rwmType;
              pre.rwmRkrq = cur.rwmRkrq;
              pre.rwmDjbh = cur.rwmDjbh;
              pre.rwmCkdm = cur.rwmCkdm;

              pre.rwdRksl = this.$math.add(pre.rwdRksl, cur.rwdRksl).toNumber();
              pre.rwdSqsl = this.$math.add(pre.rwdSqsl, cur.rwdSqsl).toNumber();
              pre.completeNumber = this.$math
                .add(pre.completeNumber, cur.completeNumber)
                .toNumber();
              pre.deductNumber = this.$math
                .add(pre.deductNumber, cur.deductNumber)
                .toNumber();

              return pre;
            },
            {
              children: groups[cate],
              hasChildren: true,
              parentId: cate,
              rwdRksl: 0,
              rwdSqsl: 0,
              completeNumber: 0,
              deductNumber: 0,
            }
          );
        })
        .sort((a, b) => a.rwmDjbh.localeCompare(b.rwmDjbh));

      return searchData;
    },
  },
  methods: {
    clearFilter() {
      this.$refs.childTable1.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandlerFuzzy(value, row, column) {
      const property = column["property"];
      return row[property].indexOf(value) > -1;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    /** 查询来料入库批退率列表 */
    getList() {
      this.tableData.loading = true;
      this.tableData.queryParams.billTjflag = null;
      this.tableData.queryParams.pageNum = 1;
      if (this.queryZtbz == 2 && this.tableData.billZtbz == 1) {
        this.tableData.queryParams.billTjflag = 1;
      }
      ProcessService.getList(this.tableData.queryParams).then((response) => {
        this.tableData.rows = response.rows;
        this.tableData.total = response.total;
        this.tableData.loading = false;
        this.reset();
        if (this.tableData.rows[0]) this.getListChild(this.tableData.rows[0]);
        else {
          this.tableDataChild.rows = [];
          this.tableDataChild1.rows = [];
        }
      });
    },
    async getListChild(row) {
      if (this.curRow == row) return;
      //点击行触发，选中或不选中复选框
      if (row) {
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleRowSelection(row);
        });
        this.curRow = row;
      }
      row = row || this.tableData.form;
      this.tableData.form = Object.assign({}, row);
      if (row && row.billDjbh) {
        this.tableDataChild1.loading = true;
        return await ProcessService.getListChild(row.billDjbh).then(
          (response) => {
            // this.tableDataChild.rows = response.data
            // this.tableDataChild.loading = false

            this.tableDataChild1.rows = response.data;
            this.tableDataChild1.loading = false;
            // this.curRow.billTotalJe = this.tableDataChild1.rows.reduce((pre, cur) => {
            //   cur.tmpJe = cur.rwdMoney || 0
            //   return pre + cur.billdSqsl * cur.rwdMoney + cur.rwdCyje
            // }, 0)
          }
        );
      } else {
        this.tableDataChild.rows = [];
        this.tableDataChild1.rows = [];
      }
    },
    //load
    load() {
      if (
        this.tableData.queryParams.pageNum <
        Math.ceil(this.tableData.total / this.tableData.queryParams.pageSize)
      ) {
        this.tableData.queryParams.pageNum++;
        ProcessService.getList(this.tableData.queryParams).then((response) => {
          this.tableData.rows = this.tableData.rows.concat(response.rows);
          this.tableData.total = response.total;
          this.tableData.loading = false;
        });
      }
    },
    // 取消按钮
    cancel() {
      this.openSearch = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
      this.openSearch = false;
    },
    exportChild(ztbz) {
      const billDjbhArray = this.tableData.selection.map((a) => a.billDjbh);
      this.$confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          if (ztbz === 1) {
            return ProcessService.exportTotal(billDjbhArray);
          } else {
            return ProcessService.exportDetail(
              this.tableData.selection.map((r) => r.billDjbh)
            );
          }
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ids =
        this.tableData.form.billId || this.tableData.selection[0].billId;
      ProcessService.getDetail(ids).then((response) => {
        this.tableData.open = true;
        this.tableData.title = "修改";
        this.tableData.form = response.data;
        this.getBillGsmc(this.tableData.form.billCsdm);
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const ids = this.tableData.selection.map((item) => item.billId)
      const ids =
        this.tableData.form.billId || this.tableData.selection[0].billId;
      this.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return ProcessService.delete(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // this.$refs.multipleTable.clearSelection()
      // this.$refs.multipleTable.toggleRowSelection(selection)
      this.tableData.selection = selection;
      console.log(selection);
    },
    handleSelectAll(selection) {
      if (selection.length > 0)
        this.$nextTick(() => {
          selection.forEach((row) => {
            if (row.children)
              this.$refs.somCheckTable.partRowSelections(row.children, true);
            else this.$refs.somCheckTable.partRowSelections(row, true);
          });
        });
    },
    handleSelect(selection, row) {
      // row.selected = !row.selected
      //console.log('handleSelect', selection)

      if (row.children)
        this.$nextTick(() => {
          this.$refs.somCheckTable.partRowSelections(
            row.children,
            selection.includes(row)
          );
        });
      //this.$refs.somCheckTable.reloadData(this.serachAddList)
    },
    handleSelectionChangeChild(selection) {
      // console.log('handleSelectionChange:::', selection)
      this.tableDataChild.selection = selection;
    },
    /** 新增按钮操作 */
    handleAdd(data) {
      this.reset();
      data.open = true;
      data.title = "添加";
    },
    /** 新增按钮操作 */
    handleAddChild(row) {
      this.resetChild();
      if (row) {
        this.tableData.form = Object.assign({}, row);
      }
      this.tableDataChild.open = true;
      this.$nextTick(this.serachChildrened);
    },
    handleEditChild(data) {
      this.tableDataChild.open = true;
      this.tableDataChild.form = Object.assign({}, data);
    },
    handleSaveChild(row, idx) {
      ProcessService.saveChild(row).then((res) => {
        // this.getListChild()
        // this.curRow.billTotalJe = this.tableDataChild1.rows.reduce((pre, cur) => {
        //   cur.tmpJe = cur.rwdMoney || 0
        //   return pre + cur.billdSqsl * cur.rwdMoney + cur.rwdCyje
        // }, 0)
        this.curRow.billTotalJe = res.data.billTotalJe;
        this.filterFuzzy[idx].rwdMoney = row.rwdMoney;

        //this.tableDataChild1.rows = [].concat(this.tableDataChild1.rows)
        this.msgSuccess("保存成功");
      });
    },
    handleCancelChild(row) {
      row.rwdMoney = row.tmpJe;
    },
    handleDeleteChild(data) {
      this.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        ProcessService.deleteChild(data).then((res) => {
          this.curRow.billTotalJe = res.data.billTotalJe;
          this.serachChildrened();
          this.getListChild();
          this.msgSuccess("删除成功");
        });
      });
    },
    /** 提交字表按钮 */
    submitFormChild() {
      if (this.tableDataChild.selection.length === 0) {
        this.msgError("请选择明细数据");
        return;
      }
      ProcessService.addChild(this.tableDataChild.selection).then((res) => {
        this.msgSuccess("保存成功");
        //this.tableDataChild.open = false
        this.curRow.billTotalJe = res.data.billTotalJe;
        this.serachChildrened();
        this.getListChild();
      });
    },
    // 取消按钮
    cancelDiag(data) {
      data.open = false;
      //this.reset()
    },
    // 表单重置
    reset() {
      this.tableData.form = {
        billId: null,
        billDjbh: null,
        billCsdm: null,
        billGsmc: undefined,
        billZtbz: null,
        billTjflag: undefined,
      };
      this.resetForm("form");
    },
    resetChild() {
      this.resetForm("formChild");
    },
    printHandle(row) {
      // const data = { billDjbh: row.billDjbh }
      // printOrder('/putStorage/bill/printTotal', data, '采购对账打印汇总')
      this.printData(row);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.tableData.form.billId != null) {
            ProcessService.edit(this.tableData.form).then(() => {
              this.msgSuccess("修改成功");
              this.tableData.open = false;
              this.getList();
            });
          } else {
            this.tableData.form.billKsrq = this.moment(
              this.dateRange[0]
            ).format("YYYY-MM-DD HH:mm:ss");
            this.tableData.form.billJsrq = this.moment(
              this.dateRange[1]
            ).format("YYYY-MM-DD HH:mm:ss");
            ProcessService.save(this.tableData.form).then(() => {
              this.msgSuccess("新增成功");
              this.tableData.open = false;
              this.getList();
            });
          }
        }
      });
    },
    handleSubmit() {
      if (this.tableDataChild1.rows.length <= 0) {
        this.msgError("请添加对账明细后再提交");
        return;
      }
      const ids =
        this.tableData.form.billId || this.tableData.selection[0].billId;
      if (!ids) {
        this.msgError("请选择单据");
        return;
      }
      ProcessService.submit(ids)
        .then((res) => {
          this.getList();
          this.msgSuccess("提交成功");
        })
        .catch(() => {
          this.msgError("提交失败");
        });
    },
    /** 审核按钮操作 */
    handleCheck() {
      const ids = this.tableData.selection
        .filter((c) => c.billZtbz == "1")
        .map((a) => a.billId);
      if (!ids) {
        this.msgError("请选择单据");
        return;
      }
      this.$confirm("确认要将选中单据通过审核?", "确认审核", {
        confirmButtonText: "审核",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(function () {
          return ProcessService.check(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("审核成功");
        });
    },
    handleBack() {
      if (this.tableData.form.billZtbz != 1) {
        this.msgError(
          "单据: " + this.tableData.form.billDjbh + " 不是未审核状态,无法撤回~"
        );
        return;
      }
      let ids = this.tableData.form.billId;
      if (!ids) {
        this.msgError("请选择单据");
        return;
      }
      this.$confirm("确认要撤回选中单据?", "确认撤回", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(function () {
          return ProcessService.rollback(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("撤回");
        });
    },
    handleBack2() {
      let ids = this.tableData.form.billId;
      if (!ids) {
        this.msgError("请选择单据");
        return;
      }
      this.$confirm("确认要撤回选中单据?", "确认撤回", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(function () {
          return ProcessService.rollback(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("撤回");
        });
    },
    handleAccounting() {
      let ids = this.tableData.form.billId;
      this.$confirm("确认要入账选中单据?", "确认入账", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(function () {
          return ProcessService.intoCheck(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("操作成功!");
        });
    },

    /** 查询子项 */
    serachChildrened() {
      this.tableDataChild.queryParams.pageNum = 1;
      this.tableDataChild.queryParams.billCsdm = this.tableData.form.billCsdm;
      this.tableDataChild.queryParams.billDjbh = this.tableData.form.billDjbh;
      this.tableDataChild.queryParams.billType = this.tableData.form.billType;
      this.tableDataChild.queryParams.params.beginDate =
        this.tableData.form.billKsrq;
      this.tableDataChild.queryParams.params.endDate =
        this.tableData.form.billJsrq;
      this.tableDataChild.loading = true;
      this.$refs.somCheckTable.reloadData([]);
      ProcessService.getListAdd(this.tableDataChild.queryParams).then(
        (response) => {
          this.$refs.somCheckTable.clearSelection();
          this.tableDataChild.selection = [];
          this.serachAddList = response.rows;
          //this.serachAddList = this.handleTree(response.rows, 'billdWldm')
          // 设置表格数据
          this.$refs.somCheckTable
            .reloadData(this.serachAddList)
            .then((res) => {
              const data = this.$refs.somCheckTable.getUTreeData();
              data.forEach((row) => {
                if (row.billdRksl < 0) {
                  this.$refs.somCheckTable.partRowSelections([row], true);
                }

                if (row.children) {
                  this.$nextTick(() => {
                    const d = row.children.filter((o) => o.billdRksl < 0);
                    this.$refs.somCheckTable.partRowSelections(d, true);
                    d.forEach((o) => (o.selectable = false));
                  });
                }
              });
              this.$refs.somCheckTable.doLayout();
            });

          this.tableDataChild.loading = false;
          this.tableDataChild.total = response.total;
        }
      );
    },
    load2() {
      if (
        this.tableDataChild.queryParams.pageNum <
        Math.ceil(
          this.tableDataChild.total / this.tableDataChild.queryParams.pageSize
        )
      ) {
        this.tableDataChild.queryParams.pageNum++;
        ProcessService.getListAdd(this.tableDataChild.queryParams).then(
          (response) => {
            this.serachAddList = this.serachAddList.concat(response.rows);
            this.tableDataChild.total = response.total;
          }
        );
      }
      return 0;
    },
    getBillGsmc(billCsdm) {
      if (billCsdm === "HD000") return;
      const cs = this.csOptions.find((o) => o.csmCsdm === billCsdm);
      if (!cs) {
        alert("选择的厂商,代码【" + cs.csmCs + "】未填写公司名称,请进行维护");
        return;
      }
      this.tableData.form.billGsmc = cs.csmGsmc;
    },
    /** 颜色事件 */
    iCellStyle: function ({ row }) {
      if (row.billZtbz == "1" && row.billTjflag == "1") {
        return "color:#0fac09";
      }
      //审核
      if (row.billZtbz == "2") {
        return "color:#0323af";
      }
      if (row.billZtbz == "3") {
        return "color:#bb0331";
      }
    },
    summaryMethod({ columns, data }) {
      const means = [
        "合计",
        "",
        "",
        "",
        this.means.rwdSqsl,
        this.means.rwdRksl,
        this.means.completeNumber,
        "",
      ]; // 合计
      // 返回一个二维数组的表尾合计(不要平均值，你就不要在数组中添加)
      return [means];
    },
    summaryMethod2({ columns, data }) {
      const means = [
        "合计",
        "",
        "",
        "",
        "",
        this.means.rwdSqsl,
        this.means.rwdRksl,
        this.means.completeNumber,
        "",
      ]; // 合计
      // 返回一个二维数组的表尾合计(不要平均值，你就不要在数组中添加)
      return [means];
    },
    async printData(row) {
      await this.getListChild(row);
      this.printPage(row);
    },
    printPage(row) {
      this.clickRwmMstr = row;
      if (this.tableDataChild1.loading) {
        setTimeout(() => this.printPage(row), 100);
      } else {
        this.context = {
          printTitle: "采购单",
          pageData: this.tableDataChild1.rows,
          clickRwmMstr: this.clickRwmMstr,
        };
        this.$nextTick(() => {
          setTimeout(() => this.$refs.printPage.print(), 300);
        });
      }
    },
    handleTest(val) {
      this.tableData.form.docFile = val;
      ProcessService.upload(this.tableData.form).then(() => {
        this.getList();
      });
    },
    get_info() {
      if (this.daterange2.length > 0) {
        this.tableData.queryParams.beginTime = this.$moment(this.daterange2[0])
          .startOf("day")
          .format();
        this.tableData.queryParams.endTime = this.$moment(this.daterange2[1])
          .endOf("day")
          .format();
      }
    },
    exportXls() {
      this.$confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return ProcessService.export(this.tableData.queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>
